<template>
  <div class="getCpu view">
    <div class="remind-breadcrumb flexb">
      <div class="flex">
        <div @click="handleToRemind('services')" style="cursor: pointer;">{{ $t('candyBox.vipTool') }}</div>
        <div style="margin: 0 10px;">></div>
        <div>{{ $t('ndxStake.freeCpu') }}</div>
      </div>
    </div>
    <div class="getCpu-cont">
      <div class="cont-head">
        <i class="iconfont icon-huangse"></i>
        <span class="word1">
          {{ $t('ndxStake.highVipGetMore') }}
        </span>
        <span class="colorThis ml" @click="handleToRemind('member')">{{ $t('ndxStake.open') }} ></span>
      </div>
      <div class="cont-body">
        <div class="flexb thisLevel">
          <span>{{ $t('ndxStake.currentVipLevel') }}</span>
          <!-- 是会员 -->
          <img v-if="user && user.level"
          :src="handleGetVipLogo(user.level)" alt="" width="19" height="17"
          style="margin: 0 7px -3px 0; cursor: pointer;">
          <!-- 非会员 -->
          <i v-else class="iconfont icon-v gray mr" style="font-size: 18px; cursor: pointer; color: #999;"></i>
        </div>
        <!-- 已/可领取租金 -->
        <!-- <div class="flexb thisLevel" v-if="user && user.freeCpuStatus">
          <span>可领取租金</span>
          <span>{{ user && user.receivedCpuQuantity || 0 }} EOS</span>
        </div>
        <div class="flexb thisLevel" v-else>
          <span>已领取租金</span>
          <span>{{ user && user.availableCpuQuantity || 0 }} EOS</span>
        </div> -->
        <!-- 已/可领取数量 -->
        <div class="flexb thisLevel" v-if="user && user.freeCpuStatus">
          <span>{{ $t('ndxStake.claimedAmountCpu') }}</span>
          <span>{{ user && user.receivedCpuQuantity || 0 }} EOS</span>
        </div>
        <div class="flexb thisLevel" v-else>
          <span>{{ $t('ndxStake.availableAmountCpu') }}</span>
          <span>{{ user && user.availableCpuQuantity || 0 }} EOS</span>
        </div>
        <div class="flexb" v-if="user && user.freeCpuStatus">
          <span>{{ $t('ndxStake.failureTime') }}</span>
          <span>{{ user && user.freeCpuExpireTime | dateFormat }}</span>
        </div>
        <!-- 领取按钮 -->
        <el-button class="btnClass"
        v-loading="loading"
        @click="handleAction"
        :class="{'disabled': Boolean(user && user.freeCpuStatus || !user.availableCpuQuantity)}"
        :disabled="Boolean(user && user.freeCpuStatus || !user.availableCpuQuantity)">
          <span v-if="user && user.freeCpuStatus">{{ $t('ndxStake.claimed') }}</span>
          <span v-else>{{ $t('ndxStake.claim') }}</span>
        </el-button>
        <p class="tip1">{{ $t('ndxStake.claimTip') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { authorized } from '@/utils/validate';
import { vipLogo } from '@/utils/wallet';

export default {
  name: 'getCpu', // 领取CPU
  data() {
    return {
      loading: false,
      disabled: false,
      user: {
        account: this.$store.state.app.scatter.identity.accounts[0].name,
        chain: this.$store.state.app.scatter.chain,
        discountRate: 1,
        anonymous: 0,
        email: '',
        isDealRemind: 0, // 成交提醒开启按钮值
        isMarketRemind: 0,
        language: this.$store.state.app.language,
        level: 0,
        maxLevel: 10,
        ndxStaked: 0,
        noRemindPartial: 0, // 部分成交
        remainDealRemindCount: 10,
        remainDrawCount: 0,
        remainMarketRemindCount: 5,
        totalSaveAmount: 0,
        usedMarketRemindCount: 0,
        vipImageUrl: null,
        vipMode: 0,
        weight: 0,
        weightRatio: 0,
        freeCpuExpireDays: 0, // 领取CPU到期天数
        freeCpuExpireTime: 0, // 领取CPU失效时间
        freeCpuStatus: 0, // 领取CPU状态：0-可领取；1-已领取
        availableCpuQuantity: 0, // 可领取CPU数量
      }, // 会员信息
    }
  },
  components: {},
  props: {},
  watch: {
    // 监听账户等级变化
    // '$store.state.app.accountInfo': function change(val) {
    //   this.user = val;
    // },
  },
  computed: {},
  created() {},
  mounted() {
    // this.user = this.$store.state.app.accountInfo;
    this.handleGetAccountInfo();
  },
  beforeDestroy() {},
  methods: {
    // 领取
    handleAction() {
      // 判断所属链是否为eos
      // const accountInfo = this.$store.state.app.accountInfo;
      // if (accountInfo && accountInfo.chain !== 'eos') {
      //   this.$message.warning(this.$t('anniversary.plstoEos'));
      //   return;
      // }
      if (this.loading) return;
      this.loading = true;
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          this.handleGetCpu();
        });
        return;
      }
      this.handleGetCpu();
    },
    // 获取CPU
    handleGetCpu() {
      // if (!this.user.availableCpuQuantity) {
      //   this.$message.error(this.$t('ndxStake.noResourcesAvailable'));
      //   return;
      // }
      this.$http.get('/account/getFreeCpu').then((res) => {
        this.loading = false;
        if (res.code !== 0) {
          this.$message.error(this.$t('ndxStake.claimUnsuccessfully'));
          return;
        }
        this.$message.success(this.$t('ndxStake.claimSuccessfully'));
        this.handleGetAccountInfo();
      });
    },
    // 获取VIP - Logo
    handleGetVipLogo(level) {
      return vipLogo(level)
    },
    // 回到会员服务首页
    handleToRemind(name) {
      this.$router.push({
        name
      });
    },
    // 获取账号会员信息
    handleGetAccountInfo() {
      const scatter = this.$store.state.app.scatter;
      if (scatter && scatter.identity) {
        const params = {
          account: scatter.identity.accounts[0].name
        }
        this.$http.post('/account/getAccountInfo', params).then((res) => {
          if (res.code === 1007) {
            const info = {
              account: this.$store.state.app.scatter.identity.accounts[0].name,
              chain: this.$store.state.app.scatter.chain,
              ambassadorType: null,
              anonymous: 0,
              consumeLevel: 0,
              discountRate: 1,
              email: null,
              expireTime: null,
              isDealRemind: 0,
              isMarketRemind: 0,
              isRenew: 0,
              joinTime: null,
              language: this.$store.state.app.language,
              level: 0,
              maxLevel: 10,
              ndxStaked: 0,
              noRemindPartial: 0,
              orderTime: null,
              remainDealRemindCount: 10,
              remainDrawCount: 0,
              remainMarketRemindCount: 5,
              renewDuration: null,
              stakeLevel: 0,
              totalSaveAmount: 0,
              usedMarketRemindCount: 0,
              vipImageUrl: null,
              vipMode: 0,
              weight: 0,
              weightRatio: 0,
              remainFreeOrderCount: 1,
            }
            this.$store.dispatch('setAccountInfo', info);
          }
          if (res.code !== 0) {
            return;
          }
          if (res.code === 0) {
            this.user = res.accountInfo;
            this.$store.dispatch('setAccountInfo', this.user);
          }
        });
        return;
      }
      this.$store.dispatch('setAccountInfo', {});
    },
  },
}
</script>
<style lang="scss" scoped>
.getCpu {
  .colorThis {
    color: #FF910D !important;
    cursor: pointer;
  }

  .btnClass {
    text-align: center;
    line-height: 45px;
    background: #FFC78A;
    color: #964D05;
    border-radius: 4px;
    border: none;
    margin: 20px 0;
    // cursor: pointer;
    font-size: 16px;
    width: 100%;
    padding: 0 !important;

    &.disabled {
      background: rgb(193, 193, 193);
      color: #fff;
    }
  }
}

.view {
  min-height: 600px;

  .remind-breadcrumb {
    padding: 30px 142px 0 40px;
    margin-bottom: 30px;
    color: #333;

    .removeAll {
      color: #278EDA;
      cursor: pointer;
    }
  }

  .getCpu-cont {
    margin: auto;
    width: 634px;
    // height: 390px;
    border-radius: 3px;
    border: 1px solid #FFE7CF;

    .cont-head {
      line-height: 70px;
      background: #FFF8EE;
      padding-left: 30px;

      .word1 {
        color: #753F05;
      }

      .iconfont {
        color: #FF910D;
      }
    }

    .cont-body {
      color: #333;
      padding: 50px 30px;
      background: #FFFCF8;
      border-top: 1px solid #FFE7CF;

      .thisLevel {
        margin-bottom: 30px;
      }

      .tip1 {
        color: #666;
      }
    }
  }
}

.theme-1B1D27 {
  .remind-breadcrumb {
    color: rgba(255, 255, 255, 0.6);
  }

  .getCpu-cont {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .cont-head {
    background: #152c58 !important;
  }

  .cont-body {
    color: rgba(255, 255, 255, 0.8) !important;
    background: #152247 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;

    .tip1 {
      color: rgba(255, 255, 255, 0.8) !important;
    }
  }

  .btnClass {
    &.disabled {
      background: rgb(143, 143, 143);
      color: rgba(255, 255, 255, 0.8) !important;
    }
  }

  .word1, .iconfont {
    color: #E5BC7E !important;
  }

  .colorThis {
    color: rgb(251, 179, 74) !important;
  }
}
</style>
